import styled from 'styled-components'
import Icon from '@/components/Icon'
export const HeaderWrap = styled.div`
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	width: 100%;
`
export const FileIcon = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -120px -305px;
	&:hover {
		background-position: -150px -305px;
	}
	&.disabled {
		background-position: -210px -305px;
		cursor: not-allowed;
	}
`
export const ProgressBtnIcon = styled(Icon)`
	width: 16px;
	height: 16px;
	background-position: 0 -542px;
`
export const StyledPlayVideo = styled.div`
	.hidden {
		display: none;
	}
	.file-wrap {
		margin-bottom: 15px;
	}
	.btn-wrap {
		.kd-button {
			padding: 0px;
			margin-left: 4px;
		}
		.stop-btn {
			color: #c62619;
			&:hover {
				color: #fff;
			}
		}
	}
	.meeting-info {
		display: flex;
		.meeting-info-name {
			max-width: 154px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.slider-info-wrap {
		.slider {
			margin-top: 8px;
			margin-left: 8px;
			.kd-progress-line-bar {
				height: 2px !important;
			}
		}
		.create_time {
			margin-left: 6px;
		}
		.time-wrap {
			text-align: right;
		}
		.slider {
			.kd-slider-handler {
				span {
					cursor: default !important;
				}
			}
		}
	}
`
